<template>
    <el-container>

        <el-aside class="menu">
            <el-menu class="el-menu-vertical" :collapse="env.isCollapse" router>
                <div>
                    <el-popover class="env" placement="right" trigger="hover">
                        <template #reference>
                            <div class="env-icon">
                                <el-icon>
                                    <Setting />
                                </el-icon>
                            </div>
                        </template>

                        <div>
                            <el-switch v-model="isDark" :active-icon="Moon" :inactive-icon="Sunny" />
                        </div>

                        <div class="btn-collapse">
                            <span>简洁菜单：</span>
                            <el-switch v-model="env.isCollapse"></el-switch>
                        </div>
                    </el-popover>
                </div>

                <el-menu-item index="/convert">
                    <el-icon>
                        <MagicStick />
                    </el-icon>
                    <span>格式转换</span>
                </el-menu-item>
            </el-menu>
        </el-aside>

        <el-main class="main" style="overflow:visible;padding-right: 0%;">
            <router-view></router-view>
        </el-main>
        
    </el-container>
</template>

<script setup lang="ts">
import {  Setting, MagicStick, Sunny, Moon } from "@element-plus/icons-vue"
import { useEnvStore } from "@/stores/env"

const envStore = useEnvStore()
let env = envStore.env
envStore.$subscribe(() => {
    localStorage.setItem("env", JSON.stringify(env))
})
//夜间模式
import { useDark } from '@vueuse/core'
let isDark = useDark()
</script>

<style scoped>
.menu{
    width: auto;
    
}

.btn-collapse {
    max-width: 10rem;
}

.el-menu-vertical {
    max-width: 10rem;
    --el-menu-active-color: #fc892d;
}

.env-icon {
    text-align: center;
}


</style>